<template>
  <div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg">
    <!-- 反馈表单 -->
    <el-form 
      ref="feedbackForm" 
      :model="form" 
      :rules="rules"
      @submit.prevent="submitForm"
    >
      <!-- 反馈类型 -->
      <div class="mb-4">
        <el-form-item prop="type">
          <el-select
            v-model="form.type"
            placeholder="请选择反馈类型"
            class="w-full"
            :class="[
              'dark:border-gray-600 dark:bg-gray-700',
              'dark:focus:ring-blue-400'
            ]"
          >
            <el-option label="问题反馈" value="bug" />
            <el-option label="联系作者" value="contact" />
          </el-select>
        </el-form-item>
      </div>

      <!-- 反馈内容 -->
      <div class="mb-4">
        <el-form-item prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="4"
            :placeholder="form.type === 'bug' 
              ? '请详细描述遇到的问题（如：页面地址、操作步骤、错误截图等）' 
              : '请输入您想交流的内容'"
            class="!font-sans"
            :class="[
              'focus:ring-2 focus:ring-blue-500',
              'dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100',
              'dark:focus:ring-blue-400'
            ]"
          />
        </el-form-item>
      </div>

      <!-- 联系方式 -->
      <div class="mb-6">
        <el-form-item prop="email" label="联系邮箱（必填）">
          <el-input
            v-model="form.email"
            placeholder="name@example.com"
            :class="[
              'dark:border-gray-600 dark:bg-gray-700',
              'dark:focus:ring-blue-400'
            ]"
          />
        </el-form-item>
      </div>

      <!-- 提交按钮 -->
      <div class="flex justify-end">
        <el-button
          type="primary"
          native-type="submit"
          class="!px-6 !py-2 !rounded-lg transition-all"
          :class="[
            'hover:scale-[0.98]',
            'dark:bg-blue-600 dark:hover:bg-blue-700'
          ]"
        >
          {{ form.type === 'bug' ? '提交问题' : '发送消息' }}
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const form = reactive({
  type: 'bug',
  content: '',
  email: ''
})

const rules = reactive({
  type: [
    { required: true, message: '请选择反馈类型', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入反馈内容', trigger: 'blur' },
    { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入联系邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
})

const submitForm = async () => {
  try {
    await $refs.feedbackForm.validate()
    
    // 邮件发送示例（需补充实际发送逻辑）
    const mailtoLink = `mailto:your@email.com?subject=[博客反馈] ${form.type}&body=内容：${form.content}%0A%0A联系邮箱：${form.email}`
    window.location.href = mailtoLink
    
    ElMessage.success('提交成功！我们会尽快处理')
    $refs.feedbackForm.resetFields()
  } catch (error) {
    ElMessage.error('请正确填写表单')
  }
}
</script>

<style>
.el-form-item__label {
  @apply dark:text-gray-300 !important;
}

.el-button--primary {
  @apply bg-blue-500 hover:bg-blue-600 border-transparent;
}

.el-select .el-input__inner {
  @apply dark:text-gray-100;
}
</style>